<template>
  <view>
    <cu-custom bgColor="bg-white" :is-back="true">
      <block slot="content" class="text-000" style="overflow:hidden;text-overflow: ellipsis">{{ options.name }}</block>
    </cu-custom>
    <view class="bg-white relative">

      <!--          顶部电影详情 start-->
      <view class="bg">
        <view class="bg-img flex padding-tb-sm padding-left-sm cn"
              style="background: url('../../static/movieImg.jpg') no-repeat;">
        </view>
        <view class="bg-block"></view>
        <!--            左边图片-->
        <view class="movie-content">
          <view>
            <img src="../../static/movieImg.jpg" style="width:194rpx;height:268rpx">
          </view>
          <!--            右边电影信息-->
          <view class="flex flex-direction margin-left-sm text-white">
            <view class="text-xl">我和我的家乡</view>
            <view class="text-df margin-top-sm">
              <view>评分
                <text class="text-orange margin-left-xs">9.3</text>
              </view>
              <view class="margin-tb-xs">主演:黄渤 葛优 范伟</view>
              <view>喜剧/剧情/中国大陆/153分钟</view>
              <view class="margin-tb-xs">2020-10-01 8:00 中国大陆上映</view>
            </view>
          </view>
          <navigator hover-class="none" :url="'/pages/movie/movie'"
                     class="flex;align-center;">
            <view class="cuIcon-right round align-center flex justify-center margin-left-lg"
                  style="width:55rpx;height:55rpx;color:#ffffff; background-color:rgba(255,255,255,0.2)"></view>
          </navigator>
        </view>
      </view>
      <!--          顶部电影详情 end-->

      <u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
        <!--        时间场次导航栏 start-->
        <view class="bg-white">
          <scroll-view class='text-gray overflow-hidden padding-top-sm padding-bottom-xl padding-tb-sm'
                       style="white-space:nowrap;width:100%;height:30px;" scroll-x="true">
            <view class="padding-lr-sm inline-block">
              <text class="padding-bottom-xs text-red text-bold">今天09-29</text>
              <view style="width:130rpx;height:6rpx;background-color:red;margin-top:6rpx;"></view>
            </view>
            <view class="padding-lr-sm inline-block">
              <text class="padding-bottom-xs">明天09-30</text>
            </view>
            <view class="padding-lr-sm inline-block">
              <text class="padding-bottom-xs">后天10-01</text>
            </view>
          </scroll-view>
        </view>
        <!--        时间场次导航栏 end-->

        <!--筛选开始-->
        <search @search="search" ref="searchRef"/>
      </u-sticky>

      <!--列表开始-->
      <view class="padding">
        <view class="flex justify-between solid-bottom padding-tb-sm" @tap="" v-for="(item,index) in data.list"
              @tap="url(item)" :key="index">
          <view class="flex flex-direction">
            <view class="flex justify-between">
              <view class="text-000 text-bold margin-bottom-sm"
                    style="overflow: hidden;text-overflow: ellipsis;width: 420rpx;white-space: nowrap">
                {{ item.cinema_name }}
              </view>

            </view>
            <view class="text-gray" style="overflow: hidden;text-overflow: ellipsis;width: 420rpx;white-space: nowrap">
              {{ item.address }}
            </view>
          </view>
          <view class="flex flex-direction">
            <view class="margin-bottom-sm">
              <view>
                <text v-if="data.list[0]" class="text-orange text-sm margin-right-xs"
                      style="border:2rpx solid orange;white-space: nowrap">立减10元
                </text>
                <text class="text-red text-bold text-lg margin-right-xs inline-block">{{ item.price }}</text>
                <text class="text-gray">元起</text>
              </view>
            </view>
            <view class="text-gray text-right">{{ item.distance }}</view>
          </view>
        </view>
      </view>
      <!--/列表结束-->


      <!--加载更多[more|loading|noMore]-->
      <load-more color="#aaa" :status="loadingMoreOptions.loading" iconType="circle" :contentText="context"/>
    </view>
    <!--/上面筛选结束-->
  </view>
</template>

<script>
import loadMore from "@/components/LoadMore/uni-load-more"
import search from "./components/search"
import uSticky from '../../components/u-sticky/u-sticky.vue'

export default {
  data() {
    return {
      data: '',
      options: '',
      current_page: 1,
      loadingMoreOptions: {loading: 'more'},
      context: {contentrefresh: '', contentnomore: '没有更多数据了'},
      requestParams: {},
      //默认按照距离排序
      searchParams: {
        sort: 'dist'
      },
      offsetTop: this.CustomBar,
      enable: true
    }
  },
  components: {
    loadMore,
    search,
    uSticky
  },
  computed: {
    location() {
      return this.$tools.location();
    }
  },
  onLoad(options) {
    console.log(options)
    console.log('options')
    this.options = options
    this.fetchData()
  },
  methods: {
    async fetchData(param, isSearch = false) {
      console.log('fetechData获取参数')
      console.log('isSearch')
      console.log(isSearch)
      this.searchParams = {...this.searchParams, ...param}

      console.log('this.location')
      console.log(this.location)

      console.log('this.searchParams')
      console.log(this.searchParams)
      let requestParams = Object.assign(this.searchParams,
          {
            city_name: this.location.city,
            longitude: this.location.longitude,
            latitude: this.location.latitude,
            show_id: this.options.show_id,
            page: this.current_page
          })

      if (isSearch) {
        console.log('搜索页面来的啊！！！！')
        requestParams['page'] = 1
      } else {
        console.log('不是搜索页面出来的啊！！！！！！')
      }
      console.log('请求的参数')
      console.log('requestParams')
      console.log(JSON.stringify(requestParams))
      let res = await this.$api.cinemas(requestParams);
      if (res) {
        //有数据
        if (requestParams['page'] !== 1 && this.data.list && this.data.list.length > 0) {
          console.log('当前页面有数据')
          res.data.list = this.data.list.concat(res.data.list)
        } else {
          console.log('当前没数据')
        }
        this.data = res.data;

        //分页设置
        let {current_page, last_page, total} = res.data.meta //分页信息
        if (current_page >= last_page) {
          this.loadingMoreOptions.loading = 'noMore' //没有了
        }
        //当前
        this.current_page = current_page
        //if(total===0)  this.context.contentnomore=''
      }
      console.log('最终赋值的影院列表')
      console.log(res)
      this.data = res.data;


    },
    //搜索
    search(params) {
      //搜索
      this.fetchData(params, true)
    },
    url(item) {
      let url = `/pages/cinema/detail?cinema_id=${item.cid}&cinema_name=${item.cinema_name}&show_id=${this.options.show_id}`
      this.$tools.goTo(url)
    }
  },
  onReachBottom() {
    console.log('onReachBottom')
    let {current_page, last_page} = this.data.meta //分页信息
    if (current_page >= last_page) {
      this.loadingMoreOptions.loading = 'noMore' //没有了
    } else {
      //页码+1
      this.current_page++
      this.loadingMoreOptions.loading = 'loading' //加载中
      this.fetchData()
    }
  }
}

</script>

<style>
.bg {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  filter: blur(10px);
}

.bg-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.movie-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
}

.bg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: blur(15px);

}
</style>